<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>登录界面</title>
    <link rel="stylesheet" type="text/css" href="/res/view/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/res/view/css/body.css"/>
    <script src="/res/view/js/jquery-2.0.3.min.js"></script>
</head>

<body>
<div class="container">
    <section id="content">
        <form onsubmit="return onSubmit()">
            <div>
                <h1>用户登录</h1>
                <div>
                    <input type="text" placeholder="账号" required
                           oninvalid="setCustomValidity('请输入您的账号');" id="username"
                           name="login_name"/>
                </div>
                <div>
                    <input type="password" placeholder="密码"
                           oninvalid="setCustomValidity('请输入您的密码');"
                           id="password"
                           name="pwd"/>
                </div>
                <div id="message"></div>
                <div class="">
                    <span class="help-block u-errormessage" id="js-serv+
                er-helpinfo">&nbsp;</span></div>
                <div align="center">
                    <!-- <input type="submit" value="Log in" /> -->
                    <!-- 如果是ajax请求，input不能使用submit -->
                    <input type="submit" value="登录" class="btn btn-primary" id="js-btn-login"
                           onclick="login()"/>

                    <input type="button" value="注册" class="btn btn-primary" id="js-btn-register"
                           onclick="register()"/>
                </div>
            </div>
        </form>
    {{/*<div class="button">*/}}
    {{/*<a href="#">忘记密码</a>*/}}
    {{/*</div> <!-- button -->*/}}
    </section><!-- content -->
</div>

<br><br><br><br>
</body>
<!-- 需要引用jq -->

<script type="text/javascript">
    function onSubmit() {
        return false;
    }

    function login() {
        var login_name = document.getElementById("username");
        var pwd = document.getElementById("password");
        if (login_name.value === "") {
            login_name.setCustomValidity('请输入您的账号');
            return
        } else {
            login_name.setCustomValidity("");
        }
        if (pwd.value === "") {
            pwd.setCustomValidity('请输入您的密码');
            return
        } else {
            pwd.setCustomValidity('');
        }
        var url = "/pc/user/login";
        jQuery.getJSON(url, {"login_name": login_name.value, "pwd": pwd.value}, function (data) {
            if (data.code !== 0) {
                pwd.value = "";
                $("#message").html(data.message);
            } else {
                SetCookie("user_id",data.data.user_id);
                window.location.href = '/res/view/home.html';
            }
        })
    }

    function register() {
        SetCookie("user_id","dad");
        window.location.href = '/res/view/test.html';
        // 以下方式直接跳转
        // window.location.href = '/res/view/register.html';
    }

    function SetCookie(name, value) {//两个参数，一个是cookie的名子，一个是值
        var Days = 1; //此 cookie 将被保存 1 天
        var exp = new Date();    //new Date("December 31, 9998");
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    }
</script>

</html>